<template>
  <div class="main-container">
    <div id="warehouse3d">
      <!-- 3D视图将在这里初始化 -->
    </div>
    <!-- 添加这个弹窗容器 -->
    <div id="popup" class="popup-container hidden">
      <div @click="closePopup" class="close-btn">
        ×
      </div>
      <div class="popup-content">
        <div id="popupContent"></div>
      </div>
    </div>
  </div>
</template>
<script>
import Warehouse3D from './utils/warehouse3d';
export default {
  components: {},
  props: {},
  data () {
    return {
      warehouse3D: null,
      locationData: {
        // 排1 (R1) - 20列
        "R1-C1-L1": { productName: "激光打印机", quantity: 8, status: "正常" },
        "R1-C5-L2": { productName: "墨盒(黑)", quantity: 30, status: "正常" },
        "R1-C10-L3": { productName: "A4打印纸", quantity: 50, status: "正常" },
        "R1-C15-L4": { productName: "装订机", quantity: 5, status: "异常1" },

        // 排2 (R2) - 20列
        "R2-C2-L1": { productName: "27寸显示器", quantity: 6, status: "正常" },
        "R2-C8-L2": { productName: "显示器支架", quantity: 12, status: "正常" },
        "R2-C12-L3": { productName: "DP线缆", quantity: 25, status: "正常" },
        "R2-C18-L4": { productName: "防蓝光膜", quantity: 40, status: "正常" },
        "R2-C17-L4": { productName: "防蓝光膜", quantity: 40, status: "正常" },
        "R2-C16-L4": { productName: "防蓝光膜", quantity: 40, status: "正常" },

        // 排3 (R3) - 20列
        "R3-C3-L1": { productName: "机械键盘", quantity: 15, status: "正常" },
        "R3-C7-L2": { productName: "无线鼠标", quantity: 20, status: "正常" },
        "R3-C11-L3": { productName: "鼠标垫", quantity: 60, status: "正常" },
        "R3-C19-L4": { productName: "键盘清洁胶", quantity: 30, status: "异常2" },

        // 排4 (R4) - 20列
        "R4-C4-L1": { productName: "企业级路由器", quantity: 3, status: "正常" },
        "R4-C9-L2": { productName: "六类网线", quantity: 40, status: "正常" },
        "R4-C14-L3": { productName: "光纤收发器", quantity: 8, status: "正常" },
        "R4-C20-L4": { productName: "机柜螺丝包", quantity: 100, status: "正常" },

        // 排5 (R5) - 20列
        "R5-C6-L1": { productName: "服务器电源", quantity: 5, status: "正常" },
        "R5-C13-L2": { productName: "DDR4内存条", quantity: 25, status: "正常" },
        "R5-C16-L3": { productName: "CPU散热器", quantity: 12, status: "正常" },
        "R5-C17-L4": { productName: "固态硬盘", quantity: 18, status: "正常" },

        // 更多数据示例（可继续扩展）
        "R1-C3-L2": { productName: "色带", quantity: 45, status: "正常" },
        "R2-C6-L3": { productName: "USB集线器", quantity: 15, status: "正常" },
        "R3-C9-L1": { productName: "笔记本支架", quantity: 20, status: "正常" },
        "R4-C11-L4": { productName: "网线钳", quantity: 8, status: "正常" },
        "R5-C8-L2": { productName: "测试仪", quantity: 4, status: "异常1" },

        "R1-C7-L3": { productName: "标签纸", quantity: 30, status: "正常" },
        "R2-C14-L1": { productName: "监控摄像头", quantity: 7, status: "正常" },
        "R3-C5-L4": { productName: "耳机支架", quantity: 25, status: "正常" },
        "R4-C17-L2": { productName: "理线架", quantity: 10, status: "正常" },
        "R5-C2-L3": { productName: "防静电手套", quantity: 50, status: "正常" },

        "R1-C12-L4": { productName: "指纹锁", quantity: 6, status: "正常" },
        "R2-C19-L1": { productName: "门禁卡", quantity: 200, status: "正常" },
        "R3-C15-L2": { productName: "巡更棒", quantity: 5, status: "正常" },
        "R4-C7-L3": { productName: "对讲机", quantity: 8, status: "正常" },
        "R5-C10-L4": { productName: "电池", quantity: 100, status: "正常" },

        "R1-C18-L1": { productName: "消防栓", quantity: 2, status: "异常2" },
        "R2-C4-L2": { productName: "灭火器", quantity: 10, status: "正常" },
        "R3-C20-L3": { productName: "应急灯", quantity: 15, status: "正常" },
        "R4-C13-L4": { productName: "安全帽", quantity: 20, status: "正常" },
        "R5-C1-L1": { productName: "反光背心", quantity: 30, status: "正常" },

        "R1-C9-L4": { productName: "温湿度计", quantity: 12, status: "正常" },
        "R2-C16-L3": { productName: "风速仪", quantity: 3, status: "正常" },
        "R3-C8-L2": { productName: "噪音计", quantity: 4, status: "正常" },
        "R4-C5-L1": { productName: "测距仪", quantity: 6, status: "正常" },
        "R5-C19-L4": { productName: "万用表", quantity: 5, status: "正常" },

        "R1-C14-L2": { productName: "工具箱", quantity: 8, status: "正常" },
        "R2-C10-L4": { productName: "螺丝刀套装", quantity: 10, status: "正常" },
        "R3-C17-L1": { productName: "电工胶布", quantity: 50, status: "正常" },
        "R4-C8-L3": { productName: "扎带", quantity: 200, status: "正常" },
        "R5-C15-L2": { productName: "水平仪", quantity: 6, status: "正常" }
      },
      options: {
        rows: 5,
        columns: 20,
        levels: 4
      }
    }
  },
  mounted () {
    this.initWarehouse3D();
  },
  beforeDestroy () {
    if (this.warehouse3D) {
      this.warehouse3D.cleanup();
    }
  },
  methods: {
    initWarehouse3D () {
      this.warehouse3D = new Warehouse3D('warehouse3d', this.options);
      this.warehouse3D.init(this.locationData);
    },
    closePopup () {
      const popup = document.getElementById('popup');
      if (popup) {
        popup.classList.add('hidden');
      }
    }
  }
}
</script>
<style scoped>
.main-container {
  height: 100%;
  position: relative;
  /* 添加这个以便弹窗可以相对于容器定位 */
}

#warehouse3d {
  width: 100%;
  height: 90vh;
}

.popup-container {
  position: absolute;
  z-index: 100;
  min-width: 250px;
  max-width: 300px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: relative;
}

.hidden {
  display: none;
}

.close-btn {
  color: #fff;
  font-size: 18px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 5px;
  z-index: 99;
}

#popupContent {
  padding-bottom: 10px;
}

::v-deep .text-lg {
  color: #fff;
  text-align: left;
  padding-left: 15px;
}

::v-deep .text-top {
  margin-top: 10px;
}

#popup {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -100%);
  /* 其他样式保持不变 */
}
</style>
